$(()=>{
    init();

    // 全局变量
    // 接口里面的data的数据
    let Datas = [];
    // 左侧滚动条对象
    let LeftScroll = null;

    // 初始
    function init() {
        // getCategories();
        // 设置字体的大小必须放在其他函数的前面
        setHTML();
        renderMain();
        eventList();
    }


    function renderMain() {
        // 1.获取本地存储中的数据 字符串类型 || null
        let lsDataStr=localStorage.getItem("cates");
        // 1.判断
        if (!lsDataStr) {
            // 不存在
            getCategories();
        }else {
            // 3.有数据
            // lsData 以前存入的一个对象
            let lsData = JSON.parse(lsDataStr);
            // 3.1 判断是否过期 单位毫秒 过期时间10s
            if (Date.now() - lsData.time>1000*10){
                // 过期了
                getCategories();
            }else {
                // 未过期
                console.log("未过期");
                // 从本地缓存里面拿出数据给Datas赋值
                Datas = lsData.data;

                renderLeft();
                renderRight(0);
            }
        }
    }
    // 获取分类数据
    function getCategories() {
        $.get("categories",(result)=>{
            if(result.meta.status===200) {
                Datas = result.data;
                // 存入数据
                let cateObj={
                    data:Datas,
                    time:Date.now()
                }
                localStorage.setItem("cates",JSON.stringify(cateObj));
                // 成功

                // 渲染左侧
                renderLeft();


                // 渲染右侧 默认渲染第一个菜单里面的内容
                renderRight(0);

            }
        });
    }

    // 绑定一堆事件
    function eventList() {
        // 绑定左侧li标签的点击事件 事件委托
        // 箭头函数会改变this的指向   this = 外层的this
        $(".left_wrap").on("tap","li",function () {
            let index = $(this).index();
            renderRight(index);

            $(this)
              .addClass("active")
              .siblings()
              .removeClass("active");

              // 往上滚动置顶
            LeftScroll.scrollToElement(this);
        });
    }

    // 渲染左侧
    function renderLeft() {
        // 渲染左侧列表
        let leftLis = Datas.map((v, i) => {
            return `<li class="${i === 0 ? 'active' : ''}">${v.cat_name}</li>`;
        })
        $(".left_wrap").html(leftLis.join(''));

        LeftScroll = new IScroll(".left_view");
    }




    // 渲染右侧
    function renderRight(index) {
        let right_arr = Datas[index].children;
        let rightHtml = template("rightTpl", { arr: right_arr });
        $(".right_view").html(rightHtml);

        // 初始化右侧滚动条,等到最后一张的标签生成了同时图片都有高度再去初始化
        // 关键字img onload事件，图片内容都加载完毕了就会触发的一个事件
        // 最后一张是指最后加载完毕的那一张，而不是索引的最后一张

        // 获取图片数组的长度
        let imgLength = $(".right_view img").length;
        $(".right_view img").on("load",function() {
            imgLength--;
            if(imgLength===0) {
                new IScroll(".right_view");
            }
            
        });
        
    }


    /**
     * 根据屏幕大小动态设置html字体大小
     */
    function setHTML() {
        // 基础值
        var baseVal = 100;
        // 设计稿的宽度
        var pageWidth = 375;
        // 要适配的屏幕的宽度?
        var screenWidth = document.querySelector("html").offsetWidth;
        // 要设置的fontsize
        var fontsize = screenWidth * baseVal / pageWidth;
        // 设置到html标签的中
        document.querySelector("html").style.fontSize = fontsize + "px";
    }
})